@use 'sass:map';

$currentTheme: '';

$themes: (
  'orangeRed': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  ),
  'darkOrange': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  ),
  'gold': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  ),
  'lightGreen': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  ),
  'darkTurquoise': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  ),
  'dodgerBlue': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  ),
  'mediumVioletRed': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  ),
  'custom': (
    '--z-color-primary': var(--el-color-primary),
    '--z-color-info': var(--el-color-info)
  )
);

@mixin useTheme {
  @each $key, $value in $themes {
    $currentTheme: $key !global;
    html[data-theme='#{$key}'] & {
      @content;
    }
  }
}

@function getStyle($styleName) {
  $themesMap: map.get($themes, $currentTheme);
  @return map.get($themesMap, $styleName);
}
